<template>
  <div class="studying">
    <div class="coursesList">
      <el-row class="item-list">
        <el-col
          :xs="11"
          :sm="7"
          :md="7"
          :lg="5"
          :xl="5"
          v-for="(citem, cindex) in coursesData"
          :key="cindex"
          class="coursesContent hover_boxShadow_defaut_shadow"
          :class="{
            twoisLast: !((cindex + 1) % 2),
            treeisLast: !((cindex + 1) % 3),
            fourisLast: !((cindex + 1) % 4),
          }"
        >
          <router-link
            :to="{
              name: 'Curr',
              params: {
                id: citem.currNo
              }
            }"
          >
            <div class="coursesImg">
              <img
                v-lazy=" citem.iconPath"
                :title="citem.iconPath ? '课程封面' : '暂无课程封面'"
              />
            </div>
            <div class="courseInfo">
              <div class="name" :title="citem.name || '【缺课程名称】'">
                {{ citem.name || "【缺课程名称】" | filterName }}
              </div>
              <div class="desc" :title="citem.currDesc || '无'">
                简介：{{ citem.currDesc || "无" }}
              </div>
              <div class="desc" :title="citem.tutorNameList || citem.tutorStaffUserName || '无'">
                教师：{{ citem.tutorNameList || citem.tutorStaffUserName || '无' }}
              </div>
              <div class="desc" :title="citem.designerNameList || citem.mainDesignerUserName || '【设计师】'">
                设计：{{ citem.designerNameList || citem.mainDesignerUserName || '【设计师】' }}
              </div>
              <div class="desc" :title="(citem.openChooseTime || '【开始时间】' | filterTime) +'~'+ (citem.closeChooseTime || '【结束时间】' | filterTime)">
                选修时间：{{
                  citem.openChooseTime || "【开始时间】" | filterTime
                }} ~
                {{ 
                  citem.closeChooseTime || "【结束时间】" | filterTime
                }}
              </div>
              <div class="desc">已选人数：{{ citem.choosedNum || 0 }}</div>
              <div class="time">
                上课时间：{{ citem.startTeachingTime || "无" | filterTime }} ~
                {{ citem.finishTeachingTime || "无" | filterTime }}
              </div>
              <div class="desc">期末分数：{{ citem.score || 0 }}</div>
            </div>
            <div class="outTobottom">课程详情</div>
          </router-link>
        </el-col>
      </el-row>
      <div class="nullData" v-if="!coursesData.length">暂无数据</div>
    </div>
  </div>
</template>

<script>
import { getCourselist, gencurr, getChooselist } from "@/request/courses";
import { mapState } from "vuex";
import { location, renderTimeToYMD, currTime } from "@/util/tool";

export default {
  data() {
    return {
      coursesData: [],
      location: location(window),
    };
  },
  computed: {
    routeName() {
      return this.$route.name;
    },
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      getChooseCourses: function (state) {
        return state.courses.chooseCourses;
      },
      CurrState: (state) => state.courses.CurrState,
    }),
  },
  filters: {
    filterName(value) {
      return value.substring(0,value.lastIndexOf('_') == -1 ? value.length:value.lastIndexOf('_'));
    },
    filterTime(val) {
      const time = new Date(val);
      if (time == "Invalid Date") return val;
      return renderTimeToYMD(time) + ' ' + currTime(time);
    },
  },
  created() {
    this.fetchCoursesList({ userID: this.userInfo.userID});
  },
  methods: {
    // 获取所有课程
    fetchCoursesList(params) {
      getChooselist(params).then((data) => {
        if (data) {
          this.coursesData = data.filter(item => item.state == this.CurrState.IsEnded);
        }
      });
    },
  },
  mounted() {},
};
</script>

<style lang="stylus">
.studying {
  padding-top: 30px;
  margin: 0 auto;
  max-width: 1200px;

  .coursesList {
    .nullData {
      font-size: 16px;
    }

    .item-list {
      display: flex;
      flex-flow: wrap;

      @media only screen and (min-width: 1200px) {
        .el-col-lg-5 {
          margin-right: calc(((1200px - (270px * 4)) / 3));
          margin-bottom: 25px;
        }

        .fourisLast {
          margin: 0;
        }
      }

      @media only screen and (max-width: 1200px) and (min-width: 768px) {
        .el-col-md-7 {
          margin-right: calc((calc(100%) / 3 / 3 / 2));
          margin-bottom: 25px;
        }

        .coursesContent {
          max-width: 270px;

          .coursesImg {
            img {
              width: 100% !important;
            }
          }
        }

        .treeisLast {
          margin: 0;
        }
      }

      @media only screen and (max-width: 767px) {
        .el-col-xs-11 {
          margin-right: calc((calc(100%) / 2 / 2 / 2 / 1.5));
          margin-bottom: 20px;
        }

        .twoisLast {
          margin-right: 0 !important;
        }
      }

      .coursesContent {
        padding: 11px 14px 0 15px;
        margin-bottom: 25px;
        position: relative;
        cursor: pointer;
        width: 270px;
        height: 480px;
        background-color: #ffffff;
        // box-shadow: 0px 8px 16px 0px rgba(79, 111, 139, 0.16);
        border-radius: 5px;
        overflow: hidden;
        transition: all 0.2s linear;

        .coursesImg {
          line-height: 0;

          img {
            object-fit: cover;
            width: 244px;
            height: 156px;
            border-radius: 5px;
          }
        }

        .courseInfo {
          .name {
            margin-top: 15px;
            font-family: PMingLiU-ExtB;
            font-weight: bold;
            font-size: 20px;
            color: #333333;
          }

          .pushTime {
            margin-top: 5px;
            font-family: PMingLiU-ExtB;
            font-size: 12px;
            color: #999999;
          }

          .desc {
            margin-top: 9px;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #666666;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .time {
            margin-top: 9px;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #666666;
          }
        }

        .outTobottom {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          width: 270px;
          height: 35px;
          // background-color: #ffc35f;
          border-radius: 0px 0px 7px 7px;
          transition: all 0.2s linear;
          text-align: center;
          line-height: 35px;
          font-family: Microsoft YaHei;
          font-size: 16px;
          color: #666;
          border-top: 1px solid #d3dae4;
        }

        .outTobottom:hover {
          background-color: #ffc35f;
          color: #fff;
        }
      }
    }
  }
}
</style>